<template>
  <t-dialog :visible="dialogVisible" size="normal" @dialog-close="cancel">
    <div slot="title" class="app-toolbox-xmap-item-dialog__title">{{ dialogTitle }}</div>
    <div slot="content" class="app-toolbox-xmap-item-dialog__content">
      <div class="app-toolbox-xmap-item-dialog__content__lpart">
        <div class="app-toolbox-xmap-item-dialog__content__lpart__name">
          <div class="app-toolbox-xmap-item-dialog__content__lpart__name__title">专题</div>
          <div class="app-toolbox-xmap-item-dialog__content__lpart__name__value">  
            <t-textarea :autosize="nameAutosize" :value="currentInputName" :focus="true" @input="handleCurrentInputName"></t-textarea>    
          </div>
        </div>
        <div class="app-toolbox-xmap-item-dialog__content__lpart__synopsis">
          <div class="app-toolbox-xmap-item-dialog__content__lpart__synopsis__title">愿景</div>
          <div class="app-toolbox-xmap-item-dialog__content__lpart__synopsis__value">
            <t-textarea :autosize="synopsisAutosize" :value="currentInputSynopsis" @input="handleCurrentInputSynopsis"></t-textarea>              
          </div>
        </div>
      </div>
      <div class="app-toolbox-xmap-item-dialog__content__rpart">
        <div class="app-toolbox-xmap-item-dialog__content__rpart__info">
          <div class="app-toolbox-xmap-item-dialog__content__rpart__info__title">其他</div>
          <div class="app-toolbox-xmap-item-dialog__content__rpart__info__table">
            <t-table :items="currentItemOtherAttrubutes" size="mini" type="blue" border stripe>
              <t-table-column label="相关属性" prop="id" width="3"></t-table-column>
              <t-table-column label="属性值" prop="content" width="5"></t-table-column>
            </t-table>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" style="text-align: right;">
      <t-button size="normal" type="update" @click="updateItem">更新</t-button>
      <t-button size="normal" type="delete" @click="deleteItem">删除</t-button>
      <t-button size="normal" type="primary" @click="cancel">退出</t-button>
    </div>
  </t-dialog>
</template>

<script>
  import TDialog from '@/components/dialog';
  import TButton from '@/components/button';
  import TInput from '@/components/input';
  import TTextarea from '@/components/textarea';
  import TTable from '@/components/table';
  import TTableColumn from '@/components/table/table-column';
  
  export default {
    name: 'app-toolbox-xmap-navbar-item-dialog',
    props: {
      store: {
        type: Object,
        required: true,
      },
      visible: {
        type: Boolean,
        required: true,
      },
      title: {
        type: String,
        required: true,
      },
    },
    components: {
      TDialog,
      TButton,
      TInput,
      TTextarea,
      TTable,
      TTableColumn,
    },
    data() {
      return {
        nameAutosize: {
          minRows: 3,
          maxRows: 4,
        },
        synopsisAutosize: {
          minRows: 4,
          maxRows: 5,
        },
      };
    },
    computed: {
      currentItem() {
        if (this.store.topic.state.mid === this.store.current.mid) {
          return this.store.topic;
        }
        let citem = null;
        Object.values(this.store.modules).forEach((item) => {
          if (item.state.mid === this.store.current.mid) {
            citem = item;
          }
        });
        return citem;
      },
      currentItemOtherAttrubutes() {
        if (this.currentItem === null) return [];
        const attrs = [];
        attrs.push({ createDate: '创建时间', createDateVal: this.dateFormat(this.currentItem.createTime) });
        attrs.push({ createDate: '更新时间', createDateVal: this.dateFormat(this.currentItem.updateTime) });
        attrs.push({ createDate: '今日番茄', createDateVal: this.currentItem.todayTomatoAmount });
        attrs.push({ createDate: '获得番茄', createDateVal: this.currentItem.tomatoAmount });
        return attrs;
      },
      currentInputName() {
        return this.store.current.input.name;
      },
      currentInputSynopsis() {
        return this.store.current.input.synopsis;
      },
      dialogTitle() {
        return this.title;
      },
      dialogVisible() {
        return this.visible;
      },
    },
    created() {
    },
    methods: {
      handleCurrentInputName(val) {
        this.store.current.input.name = val;
      },
      handleCurrentInputSynopsis(val) {
        this.store.current.input.synopsis = val;
      },
      cancel() {
        this.$emit('close');
      },
      getUpdateItemUrl() {
        if (this.currentItem.state.type === 'topic') {
          return `api/topics/${this.currentItem.id}`;
        }
        if (this.currentItem.state.type === 'module') {
          return `api/modules/${this.currentItem.id}`;
        }
        return null;
      },
      getDeleteItemUrl() {
        if (this.currentItem.state.type === 'topic') {
          return `api/topics/${this.currentItem.id}/actions/delete`;
        }
        if (this.currentItem.state.type === 'module') {
          return `api/modules/${this.currentItem.id}/actions/delete`;
        }
        return null;
      },
      getDeleteItemType() {
        return this.currentItem.state.type;
      },
      deleteItem() {
        const mid = this.currentItem.state.mid;
        this.$parent.seq.splice(this.$parent.seq.indexOf(mid), 1);
        const target = this.getDeleteItemUrl();
        const type = this.getDeleteItemType();
        this.$http.request({
          url: target,
          method: 'post',
        }).then(() => {
          this.currentItem.state.enabled.update = false;
          this.store.current.mid = 0;
          this.$emit('close');
          if (type === 'topic') {
            this.$router.push({ path: '/service/topic?refresh=true' });
          }
        }).catch(() => {
        });
      },
      updateItem() {
        const name = this.store.current.input.name;
        const synopsis = this.store.current.input.synopsis;
        this.currentItem.name = name;
        this.currentItem.synopsis = synopsis;
        const target = this.getUpdateItemUrl();
        this.$http.request({
          url: target,
          method: 'put',
          data: {
            name,
            synopsis,
          },
          transformRequest: [(data) => {
            const encodeName = encodeURIComponent(data.name);
            const encodeSynopsis = encodeURIComponent(data.synopsis);
            return `name=${encodeName}&synopsis=${encodeSynopsis}`;
          }],
        }).then(() => {
          this.$emit('close');
        }).catch(() => {
        });
      },
      dateFormat(ut) {
        const day = ut.dayOfMonth;
        const dayValue = day < 10 ? `0${day}` : `${day}`;
        return `${ut.year}-${ut.monthValue}-${dayValue}`;
      },
    },
  };
</script>